<template>
  <div class="user_detail">
    <div class="user_img">
      <img v-if="userData.user_img" :src="userData.user_img" alt="用户头像">
      <img v-else alt="头像" src="@/assets/default_img.jpg">
    </div>
    <div class="user_edit">
      <div class="container">
        <p>
          <span class="info_number">1</span>
          <span class="info_text">粉丝</span>
        </p>
        <div>|</div>
        <p>
          <span class="info_number">2</span>
          <span class="info_text">关注</span>
        </p>
        <div>|</div>
        <p>
          <span class="info_number">3</span>
          <span class="info_text">获赞</span>
        </p>
      </div>
      <van-button color="#f09ab8" plain style="min-width: 56vw;height: 8vw" @click="$router.push('/edit')">编辑资料
      </van-button>
    </div>
    <div class="user_desc">
      <h3>{{ userData.name }}</h3>
      <p v-if="userData.user_desc">{{ userData.user_desc }}</p>
      <p v-else>这个人很神秘，什么都没有写</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserDetail',
  props: ['userData']
}
</script>

<style lang="less" scoped>
.user_detail {
  display: flex;
  justify-content: space-between;
  background-color: white;
  padding: 0 3.2vw;
  flex-wrap: wrap;

  .user_img {
    img {
      height: 22.67vw;
      width: 22.67vw;
      border-radius: 50%;
    }
  }

  .container {
    display: flex;
    margin: 0 4vw;

    p {
      flex: 1;
      display: flex;
      align-items: center;
      flex-direction: column;
      font-size: 3.47vw;
      margin-bottom: 2vw;
    }

    div {
      line-height: 14vw;
      margin: 0 6vw;
      color: #aaa;
    }

    .info_text {
      font-size: 3vw;
      color: #aaa;
    }

    .info_number {
      font-size: 4vw;
    }
  }

  .user_desc {
    display: flex;
    flex-direction: column;

    h3 {
      margin: 2.78vw 0 0.83vw 0;
      font-weight: 400;
    }

    p {
      margin: 2.78vw 0;
      font-size: 3.73vw;
      color: #aaaaaa;
    }
  }

}
</style>
